<template>
  <div class="tickets_buy column">
    <!-- <div class="row_s confirm_order">
        <van-icon name="arrow-left" size="0.26rem" @click="backPage"/>
        <span>订单确认</span>
        <span></span>
    </div> -->
    <div class="tickets_info">
        <h2>第9届耀YO潮流文化节</h2>
        <ul class="column_s">
            <li>
                <img :src="require('@/assets/images/time.png')" alt="">
                <p>2018-07-28 <span>|</span>周六<span>|</span>19:30-22:00</p>
            </li>
            <li>
                <img :src="require('@/assets/images/address.png')" alt="">
                <p>河南省体育中心</p>
            </li>
            <li>
                <img :src="require('@/assets/images/zw.png')" alt="">
                <p class="row"><template v-for="(item, index) in seats" >{{item.pai}}排{{item.zuo}}座<span :key="index" v-show="index !== seats.length-1">|</span></template></p>
            </li>
        </ul>
    </div>
    <h1 class="qp_way">取票方式</h1>
    <h2 class="school_zt">校区自提</h2>
    <van-cell-group>
        <van-field
            v-model="buy_info.name"
            clearable
            label="取票人"
            placeholder="请输入取票人姓名"
        />
        <van-field
            v-model="buy_info.mobile"
            type="tel"
            label="联系电话"
            placeholder="用于接收提醒短信"
        />
        <van-cell title="选择门店" is-link :value='value' @click="chooseSchool"/>
        <van-popup v-model="showPicker" position="bottom">
            <van-picker :columns="columns" show-toolbar @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
    </van-cell-group>
    <confirm-order @commitOrderBuy="commitOrderBuys" :all_p="allPrice"></confirm-order>
  </div>
</template>

<script>
/* eslint-disable */
import { Icon, Tab, Tabs, Field, Picker, Cell, CellGroup, Popup, AddressEdit, Toast } from 'vant'
import ConfirmOrder from './components/ConfirmOrder'
import { list } from '@/assets/jsonData.js'
export default {
  name: 'TicketsBuy',
  components: {
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [AddressEdit.name]: AddressEdit,
    [Toast.name]: Toast,
    ConfirmOrder
  },
  data () {
    return {
      columns: [],
      showPicker: false,
      value: '请选择门店',
      seats: [],
      list: list,
      buy_info: {
        seat_num: [],
        name: '',
        mobile: '',
        address: ''
      },
      allPrice: null
    }
  },
  methods: {
    loadData () {
      this.$axios.get('http://hytest.xihabang.com/api/ticket_api.php?do=store')
        .then((res) => {
          console.log(res.data.data)
          res.data.data.map((item, index) => {
            this.columns.push({keyId: item.id, text: item.name})
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    chooseSchool () {
      this.showPicker = true
    },
    onConfirm (val, index) {
      this.buy_info.address = val.keyId
      this.value = val.text
      this.showPicker = false
    },
    backPage () {
      this.$router.back()
    },
    commitOrderBuys () {
      var reg = /^1[3456789]\d{9}$/;
    if (this.buy_info.name == '') {
      Toast("姓名不能为空")
    } else if (this.buy_info.mobile == '') {
		  Toast("手机号不能为空")
	  } else if (!(reg.test(this.buy_info.mobile))) {
		  Toast("手机号格式不正确")
	  } else if (this.buy_info.address == '') {
      Toast("门店不能为空")
    } else {
      this.$axios.post('http://hytest.xihabang.com/api/ticket_api.php?do=buy', this.buy_info)
        .then((res) => {
          Toast(res.data.msg)
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
      }
      console.log(this.buy_info)
    }
  },
  mounted () {
    this.$nextTick(function () {
      if (localStorage.getItem('seatLists')) {
        this.seats = JSON.parse(localStorage.getItem('seatLists'))
        this.seats.map((item, index) => {
          this.allPrice += parseInt(item.jia)
          this.buy_info.seat_num.push({id: item.id, seat: item.zuo})
        })
        this.buy_info.qu = this.list[localStorage.getItem('zwRegion')].value
        this.buy_info.hykh = localStorage.getItem('hykh')
      }
      this.loadData()
    })
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.tickets_buy{
    width: 10rem;
    .confirm_order{
        width: 100%;
        height: 0.86rem;
        font-size: 0.34rem;
        padding-left: .24rem;
        border-bottom: 0.01rem solid #F0F0F0;
        span{
            color: #353535;
            font-weight: bold;
        }
    }
    .tickets_info{
        width: calc(~"100% - 0.893333rem");
        height: 4.546667rem;
        margin-top: .12rem;
        background-image: url(~@/assets/images/ticket_info_bg.png);
        background-size: 100% 100%;
        padding-left: .893333rem;
        h2{
            font-size: .4rem;
            line-height: 1.46rem;
        }
        ul{
            height: 2.5rem;
            li{
                display: flex;
                img{
                    margin-right: .493333rem;
                }
                &:nth-child(1){
                    img{
                        width: .333333rem;
                        height: .333333rem;
                    }
                }
                &:nth-child(2){
                    img{
                        width: .28rem;
                        height: .373333rem;
                    }
                }
                &:nth-child(3){
                    img{
                        width: .266667rem;
                        height: .253333rem;
                    }
                }
                p{
                    font-size: .32rem;
                    span{
                        margin: 0 .16rem;
                    }
                }
            }
        }
    }
    .qp_way{
        font-size: .48rem;
        line-height: 0.48rem;
        color: #C2C2C2;
        padding-left: .28rem;
        margin-top: .853333rem;
        margin-bottom: .4rem;
    }
    .school_zt{
        font-size: .36rem;
        color: #E2B979;
        padding-left: .28rem;
        margin-top: .2rem;
        margin-bottom: .4rem;
    }
}
</style>
